<template>
  <div class="p-16px">
    <div class="flex items-start">
      <wd-img :width="50" :height="50" :src="userInfo.avatar" />
      <div class="ml-2">
        <div class="font-500">
          {{ userInfo.name }}
        </div>
        <div>
          <wd-textarea v-model="content" readonly />
        </div>
        <div v-if="data?.images" class="mt-1">
          <wd-img
            v-for="pic in data?.images?.split(',')"
            :key="pic"
            :width="100"
            :height="100"
            :src="pic"
            custom-class="mr-4"
            :enable-preview="true"
          />
        </div>
      </div>
    </div>
    <div class="h-2px bg-[#F2F2F2] mb-20px" />
    <div class="flex justify-end">
      <wd-button size="small" plain @click="copy(data?.content || '')">
        复制内容
      </wd-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { findDetail } from '@/api/draft';
import { TContent } from '@/api/draft/type';
import { ResultCodeEnum } from '@/enums';
import { useUserStore } from '@/store';
import { copy } from '@/utils/common';

onShareAppMessage(() => ({
  title: '预览',
  path: `/pages/moments/preview/index?id=${id}`
}));

onShareTimeline(() => ({
  title: '分享朋友圈'
}));

const userInfo = useUserStore().userInfo;

const data = ref<TContent>();
const content = computed(() => data.value?.content || '');
const id = ref(0);
onLoad((options) => {
  if (options?.id) {
    getDetail(Number(options.id));
  }
});

const getDetail = async (id: number) => {
  const res = await findDetail(id);
  if (res.code === ResultCodeEnum.SUCCESS) {
    data.value = res.data;
  }
};
</script>

<style lang="scss" scoped></style>
